<template>
  <view>
    <view class="OrderCancellation">
      <view class="header"></view>
      <view class="whiteBg" v-if="tabOn == 2">
        <view class="input">
          <input type="number" placeholder="请输入核销码" v-model="verify_code"/>
        </view>
        <view class="bnt" @click="codeChange">
          <text class="iconfont icon-sousuo7"></text>
        </view>
      </view>
      <view v-if="tabOn == 1" class="scan" @click="scanCode">
        <text class="iconfont icon-ic_Scan"></text>
      </view>
      <view class="tabbar-box acea-row">
        <view class="item" :class="{ on: tabOn == 1 }" @click="onTab(1)">
          <view class="bg"></view>
          <view class="inner">
            <text class="iconfont icon-ic_Scan"></text>
            扫码核销
          </view>
        </view>
        <view class="item" :class="{ on: tabOn == 2 }" @click="onTab(2)">
          <view class="bg"></view>
          <view class="inner">
            <text class="iconfont icon-ic_edit"></text>
            手动输入
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  orderGetVerfication,
  employeeOrderCancel
} from "@/api/work";
import colors from '@/mixins/color.js';
import {
  toLogin
} from '@/libs/login.js';
import {
  mapGetters
} from 'vuex';
// #ifdef MP || APP-PLUS
import NavBar from '../components/NavBar.vue';
// #endif
const app = getApp();
export default {
  components: {
    // #ifdef MP || APP-PLUS
    NavBar,
    // #endif
  },
  // mixins: [colors],
  data() {
    return {
      theme: app.globalData.theme,
      // #ifdef MP || APP-PLUS
      iconColor: '#FFFFFF',
      isScrolling: false,
      // #endif
      iShidden: false,
      verify_code: '',
      isWeixin: '',
      orderInfo: {},
      tabOn: 1,
      auth: 1,
    }
  },
  computed: mapGetters(['isLogin']),
  onLoad(options) {
    // #ifdef H5 || APP-PLUS
    this.isWeixin = this.$wechat.isWeixin();
    // #endif
    // #ifdef MP
    if (options.scene) {
      options = this.$util.getUrlParams(decodeURIComponent(options.scene));
    }
    // #endif
    const {
      auth,
      code
    } = options;
    this.auth = auth || 1;
    this.verify_code = code || '';
  },
  onShow() {
    if (this.isLogin) {
      if (this.auth == 3) {
        this.codeChange();
      }
    } else {
      toLogin();
    }
  },
  methods: {
    // 立即核销
    codeChange: function () {
      let self = this
      let ref = /^[0-9]*$/;
      if (!this.verify_code) return self.$util.Tips({
        title: '请输入核销码'
      });
      orderGetVerfication( {verifyCode: this.verify_code} ).then(res => {
        if (res.code == 200) {
          uni.navigateTo({
            url: `/pages/admin/cancel/list?info=${JSON.stringify(res.data)}&verifyCode=${this.verify_code}`
          })
        }
      }).catch(res => {
        uni.navigateTo({
          url: '/pages/admin/cancel/result?type=0'
        })
      })
    },
    // 扫码核
    scanCode() {
      var self = this;
      // #ifdef MP || APP
      uni.scanCode({
        success(res) {
          self.verify_code = res.result;
          console.log(JSON.parse(self.verify_code))
          if(JSON.parse(self.verify_code).verifyCode === undefined){
            self.codeChange();
          } else {
            employeeOrderCancel(self.verify_code).then(res => {
              if (res.data === true) {
                uni.showToast({
                  title: "核销成功",
                })
              } else {
                uni.showToast({
                  title: "核销失败",
                })
              }
            }).catch(err => {
              return this.$util.Tips({
                title: err
              });
            })
          }
        }
      })
      // #endif
      //#ifdef H5
      if (this.$wechat.isWeixin()) {
        this.$wechat.wechatEvevt('scanQRCode', {
          needResult: 1,
          scanType: ["qrCode", "barCode"]
        }).then(res => {
          let result = res.resultStr;
          if (result.includes(',')) {
            result = result.split(",")[1]
          }
          this.verify_code = result
          this.codeChange();
        })
      } else {
        return self.$util.Tips({
          title: '扫码核销仅支持小程序/公众号/APP',
          endtime: 2000,
        });
      }
      //#endif
    },
    cancel: function () {
      this.iShidden = false
    },
    onTab(value) {
      this.tabOn = value;
    }
  }
}
</script>

<style lang="scss">
page {
  // background-color: #fff;
}

.OrderCancellation {
  position: absolute;
  width: 100%;
  overflow: hidden;
}

.OrderCancellation .header {
  position: absolute;
  top: 0;
  left: -25%;
  width: 150%;
  height: 660rpx;
  border-bottom-right-radius: 100%;
  border-bottom-left-radius: 100%;
  background: #FFFFFF;
}

.OrderCancellation {
  // width: 100%;
  // height: 100%;
  // background: #fff;
  overflow: hidden;
}

.OrderCancellation .whiteBg {
  position: relative;
  width: 540rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin: 250rpx auto 416rpx;
  background: #F5F5F5;
}

.OrderCancellation .whiteBg .input {
  height: 100%;
}

.OrderCancellation .whiteBg .input input {
  font-size: 32rpx;
  color: #333333;
  height: 100%;
  text-align: center;
  line-height: 120rpx;
  padding: 0 104rpx;
  box-sizing: border-box;
}

.OrderCancellation .whiteBg .input .input-placeholder {
  color: #CCCCCC;
}

.OrderCancellation .whiteBg .bnt {
  position: absolute;
  top: 20rpx;
  right: 24rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: #2A7EFB;
  text-align: center;
  line-height: 80rpx;
}

.OrderCancellation .whiteBg .bnt .iconfont {
  font-size: 32rpx;
  color: #FFFFFF;
}

.OrderCancellation .scan {
  position: relative;
  width: 400rpx;
  height: 400rpx;
  border-radius: 200rpx;
  margin: 110rpx auto 0;
  background: #2A7EFB;
  box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(27, 102, 214, 0.3);
  text-align: center;
  line-height: 400rpx;
}

.OrderCancellation .scan .iconfont {
  font-size: 120rpx;
  color: #FFFFFF;
}

.OrderCancellation .scan image {
  width: 100%;
  height: 100%;
  display: block;
}

.WriteOff {
  width: 560rpx;
  height: 800rpx;
  background-color: #fff;
  border-radius: 20rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -400rpx;
  margin-left: -280rpx;
  z-index: 99;
  padding-top: 55rpx;
}

.WriteOff .pictrue {
  width: 340rpx;
  height: 340rpx;
  margin: 0 auto;
}

.WriteOff .pictrue image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 10rpx;
}

.WriteOff .num {
  font-size: 30rpx;
  color: #666;
  margin: 28rpx 0 30rpx 0;
}

.WriteOff .num .see {
  font-size: 16rpx;
  color: #fff;
  border-radius: 4rpx;
  background-color: #c68937;
  padding-left: 5rpx;
  margin-left: 12rpx;
}

.WriteOff .num .see .iconfont {
  font-size: 15rpx;
}

.WriteOff .tip {
  font-size: 36rpx;
  color: #282828;
  text-align: center;
  border-top: 1px dashed #ccc;
  padding-top: 40rpx;
  position: relative;
}

.WriteOff .tip:after {
  content: "";
  position: absolute;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: #7f7f7f;
  right: -12.5rpx;
  top: -12.5rpx;
}

.WriteOff .tip:before {
  content: "";
  position: absolute;
  width: 25rpx;
  height: 25rpx;
  border-radius: 50%;
  background-color: #7f7f7f;
  left: -12.5rpx;
  top: -12.5rpx;
}

.WriteOff .sure {
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  line-height: 82rpx;
  height: 82rpx;
  width: 460rpx;
  border-radius: 41rpx;
  margin: 40rpx auto 0 auto;
  background-image: linear-gradient(to right, #f67a38 0%, #f11b09 100%);
  background-image: -webkit-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
  background-image: -moz-linear-gradient(to right, #f67a38 0%, #f11b09 100%);
  background-color: var(--view-theme);
}

.WriteOff .cancel {
  line-height: 82rpx;
  color: #999;
  height: 82rpx;
  width: 460rpx;
  border-radius: 41rpx;
  margin: 10rpx auto 0 auto;
  text-align: center;
}

.WriteOff .cancel {
}

.views {
  font-size: 18rpx;
  background: #C68937;
  border-radius: 4px;
  color: #fff;
  padding: 5rpx 2rpx 5rpx 8rpx;
  margin-left: 10rpx;
}

.views-jian {
  font-size: 10px;
}

.tabbar-box {
  width: 516rpx;
  margin: 276rpx auto 0;

  .item {
    position: relative;
    flex: 1;
    z-index: 5;
    min-width: 0;
    height: 80rpx;
    border-radius: 40rpx 0 0 40rpx;
    overflow: hidden;

    &:last-child {
      border-radius: 0 40rpx 40rpx 0;

      .bg {
        height: 68rpx;
        top: 0;
        border-radius: 12rpx 0 0 12rpx;
        transform-origin: center top;
        transform: perspective(80rpx) rotateX(10deg) translateX(20rpx);
      }


    }

    &.on {
      .bg {
        background: #2A7EFB;
      }

      .inner {
        color: #FFFFFF;
      }
    }
  }

  .bg {
    position: absolute;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 68rpx;
    border-radius: 0 12rpx 12rpx 0;
    background: #FFFFFF;
    transform-origin: center bottom;
    transform: perspective(80rpx) rotateX(-10deg) translateX(-20rpx);
  }

  .inner {
    position: absolute;
    z-index: 3;
    width: 260rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
  }

  .iconfont {
    vertical-align: middle;
    margin-right: 16rpx;
    font-size: 32rpx;
  }
}
</style>